<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="cardList">
      <el-row>
        <el-col>
          <el-button type="primary" @click="addCateVisible=true">添加分类</el-button>
        </el-col>
      </el-row>
      <tree-table
        class="tableTop"
        ref="table"
        sum-text="sum"
        index-text="#"
        :data="data"
        :columns="columns"
        :selection-type="false"
        :show-row-hover="false"
        show-index
        stripe
        border
        tree-type
        :expand-type="false"
      >
        <template slot="isNo" slot-scope="scope">
          <el-button type="success" icon="el-icon-check" circle v-if="scope.row.sex==='male'"></el-button>
          <el-button type="danger" icon="el-icon-close" circle v-else></el-button>
        </template>
        <template slot="elTag" slot-scope="scope">
          <el-tag type="success" v-if="9<scope.row.score&&scope.row.score<15">一级</el-tag>
          <el-tag type="warning" v-else-if="15<scope.row.score&&scope.row.score<25">二级</el-tag>
          <el-tag type="danger" v-else>三级</el-tag>
        </template>
        <template slot="likes" slot-scope="scope">
          <el-button type="success" icon="el-icon-edit" size="mini" :xs="8">编辑</el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :xs="8"
            @click="deleteUser(scope)"
          >删除</el-button>
        </template>
      </tree-table>
      <el-pagination
        class="tableTop"
        :page-sizes="[2, 5, 8, 10]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="40"
      ></el-pagination>
    </el-card>
    <el-dialog title="添加分类" :visible.sync="addCateVisible" width="50%" @close='cataClose'>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="addForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分类名称" prop="name">
          <el-input type="text" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类" prop="checkPass">
          <el-cascader
            class="el-cascader"
            v-model="selectValue"
            width="100%"
            :options="options"
            @change="parentCataChange"
            :props="{ expandTrigger: 'hover' }"
            clearable
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCateVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectValue: [],
      options: [
        {
          value: "1",
          label: "指南",
          children: [
            {
              value: "2",
              label: "设计原则",
              children: [
                {
                  value: "3",
                  label: "一致"
                },
                {
                  value: "3",
                  label: "反馈"
                },
                {
                  value: "3",
                  label: "效率"
                },
                {
                  value: "3",
                  label: "可控"
                }
              ]
            },
            {
              value: "2",
              label: "导航",
              children: [
                {
                  value: "2",
                  label: "侧向导航"
                },
                {
                  value: "2",
                  label: "顶部导航"
                }
              ]
            }
          ]
        },
        {
          value: "1",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局"
                },
                {
                  value: "color",
                  label: "Color 色彩"
                },
                {
                  value: "typography",
                  label: "Typography 字体"
                },
                {
                  value: "icon",
                  label: "Icon 图标"
                },
                {
                  value: "button",
                  label: "Button 按钮"
                }
              ]
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框"
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框"
                },
                {
                  value: "input",
                  label: "Input 输入框"
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器"
                },
                {
                  value: "select",
                  label: "Select 选择器"
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器"
                },
                {
                  value: "switch",
                  label: "Switch 开关"
                },
                {
                  value: "slider",
                  label: "Slider 滑块"
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器"
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器"
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器"
                },
                {
                  value: "upload",
                  label: "Upload 上传"
                },
                {
                  value: "rate",
                  label: "Rate 评分"
                },
                {
                  value: "form",
                  label: "Form 表单"
                }
              ]
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格"
                },
                {
                  value: "tag",
                  label: "Tag 标签"
                },
                {
                  value: "progress",
                  label: "Progress 进度条"
                },
                {
                  value: "tree",
                  label: "Tree 树形控件"
                },
                {
                  value: "pagination",
                  label: "Pagination 分页"
                },
                {
                  value: "badge",
                  label: "Badge 标记"
                }
              ]
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告"
                },
                {
                  value: "loading",
                  label: "Loading 加载"
                },
                {
                  value: "message",
                  label: "Message 消息提示"
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框"
                },
                {
                  value: "notification",
                  label: "Notification 通知"
                }
              ]
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单"
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页"
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑"
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单"
                },
                {
                  value: "steps",
                  label: "Steps 步骤条"
                }
              ]
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框"
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示"
                },
                {
                  value: "popover",
                  label: "Popover 弹出框"
                },
                {
                  value: "card",
                  label: "Card 卡片"
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯"
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板"
                }
              ]
            }
          ]
        }
      ],
      ruleForm: {
        name: "",
        checkpass: ""
      },
      addCateVisible: false,
      qureyInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      data: [
        {
          name: "Jack",
          sex: "male",
          likes: ["football", "basketball"],
          score: 10,
          children: [
            {
              name: "Ashley",
              sex: "female",
              likes: ["football", "basketball"],
              score: 20,
              children: [
                {
                  name: "Ashley",
                  sex: "female",
                  likes: ["football", "basketball"],
                  score: 20
                },
                {
                  name: "Taki",
                  sex: "male",
                  likes: ["football", "basketball"],
                  score: 10,
                  children: [
                    {
                      name: "Ashley",
                      sex: "female",
                      likes: ["football", "basketball"],
                      score: 20
                    },
                    {
                      name: "Taki",
                      sex: "male",
                      likes: ["football", "basketball"],
                      score: 10,
                      children: [
                        {
                          name: "Ashley",
                          sex: "female",
                          likes: ["football", "basketball"],
                          score: 20
                        },
                        {
                          name: "Taki",
                          sex: "male",
                          likes: ["football", "basketball"],
                          score: 10
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              name: "Taki",
              sex: "male",
              likes: ["football", "basketball"],
              score: 10
            }
          ]
        },
        {
          name: "Tom",
          sex: "male",
          likes: ["football", "basketball"],
          score: 20,
          children: [
            {
              name: "Ashley",
              sex: "female",
              likes: ["football", "basketball"],
              score: 20,
              children: [
                {
                  name: "Ashley",
                  sex: "female",
                  likes: ["football", "basketball"],
                  score: 20
                },
                {
                  name: "Taki",
                  sex: "male",
                  likes: ["football", "basketball"],
                  score: 10
                }
              ]
            },
            {
              name: "Taki",
              sex: "male",
              likes: ["football", "basketball"],
              score: 10,
              children: [
                {
                  name: "Ashley",
                  sex: "female",
                  likes: ["football", "basketball"],
                  score: 20
                },
                {
                  name: "Taki",
                  sex: "male",
                  likes: ["football", "basketball"],
                  score: 10
                }
              ]
            }
          ]
        },
        {
          name: "Tom",
          sex: "male",
          likes: ["football", "basketball"],
          score: 20
        },
        {
          name: "Tom",
          sex: "male",
          likes: ["football", "basketball"],
          score: 20,
          children: [
            {
              name: "Ashley",
              sex: "female",
              likes: ["football", "basketball"],
              score: 20
            },
            {
              name: "Taki",
              sex: "male",
              likes: ["football", "basketball"],
              score: 10
            }
          ]
        },
        {
          name: "Tom",
          sex: "male",
          likes: ["football", "basketball"],
          score: 50
        },
        {
          name: "Tom",
          sex: "male",
          likes: ["football", "basketball"],
          score: 30,
          children: [
            {
              name: "Ashley",
              sex: "female",
              likes: ["football", "basketball"],
              score: 20
            },
            {
              name: "Taki",
              sex: "male",
              likes: ["football", "basketball"],
              score: 10
            }
          ]
        }
      ],
      columns: [
        {
          label: "分类名称",
          prop: "name",
          width: "400px"
        },
        {
          label: "是否有效",
          prop: "sex",
          type: "template",
          template: "isNo"
        },
        {
          label: "排序",
          prop: "score",
          type: "template",
          template: "elTag"
        },
        {
          label: "likes",
          minWidth: "200px",
          type: "template",
          template: "likes"
        }
      ],
      rules: {
        name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    deleteUser(data) {
      console.log(data);
    },
    parentCataChange() {
      console.log(this.selectValue);
    },
    cataClose() {
      this.$refs.addForm.resetFields();
      console.log("重置表单");
    }
  }
};
</script>
<style scoped>
.tableTop {
  margin-top: 15px;
}
.el-cascader {
  width: 100%;
}
</style>